<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button type="primary" @click="edit('')" :icon="Plus">
          新增
        </el-button>
      </template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="detail(scope.row.id)">
          详情
        </el-button>
        <el-button plain type="primary" @click="edit(scope.row.id)">编辑</el-button>
        <el-button plain type="primary" @click="edit('',scope.row.id)">复制</el-button>
        <el-button plain type="primary" @click="del(scope.row.id)">删除</el-button>
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
    <pub-dialog
      v-if="editDialogVisible"
      :title="dialogTitle"
      :hasExtraBtn="true"
      v-model:visible="editDialogVisible"
      width="800"
    >
      <editDialog :dialog-id="dialogId" @cancel="editDialogVisible = false" @success="editSuccess" :copy-id="copyId"></editDialog>
    </pub-dialog>
    <!--  -->
    <pub-dialog
      v-if="detailDialogVisible"
      :title="dialogTitle"
      v-model:visible="detailDialogVisible"
      width="800"
    >
      <detailDialog :dialog-id="dialogId"></detailDialog>
    </pub-dialog>
  </list-page>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { useTable } from '@/hooks/UseTable'
import { get_api_list,resource_routing_delete } from '@/api/system'
import { ElMessage, ElMessageBox } from 'element-plus'
import editDialog from './edit.vue'
import detailDialog from './detail.vue'
const searchColumns = ref([
  {
    label: '平台类型',
    el: 'DictSelect',
    code: 'SYS_PTLX',
    bind: 'platform',
    defaultValue: 1,
    labelWidth: 80,
    clearable: false
  },
  {
    label: '模块名称',
    el: 'DynamicSelect',
    bind: 'moduleCode',
    defaultValue: '',
    url: 'get_api_module',
    params: {},
    firstValue: true,
    watchKey: 'platform',
    labelWidth: 80
  },
  {
    label: '子模块名称',
    el: 'Input',
    bind: 'submoduleName',
    defaultValue: '',
    labelWidth: 90
  },
  {
    label: '页面名称',
    el: 'Input',
    bind: 'pageName',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '接口地址',
    el: 'Input',
    bind: 'url',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '接口名称',
    el: 'Input',
    bind: 'urlName',
    defaultValue: '',
    labelWidth: 90
  }
])
const columns = ref([
  {
    label: '平台类型',
    prop: 'platform',
    type: 'formatDict',
    formatCode: 'SYS_PTLX'
  },
  { label: '模块名称', prop: 'moduleName' },
  { label: '子模块名称', prop: 'submoduleName' },
  { label: '页面名称', prop: 'pageName' },
  { label: '接口路径', prop: 'url' },
  { label: '接口名称', prop: 'urlName' },
  { label: '鉴权', prop: 'routingCode' },
  { label: '操作', type: 'option', width: '220' }
])
//
const editDialogVisible = ref(false)
const dialogTitle = ref('新增')
const dialogId = ref('')
const copyId = ref('')
const detailDialogVisible = ref(false)
const detail = id => {
  dialogId.value = id
  dialogTitle.value = '详情'
  detailDialogVisible.value = true
}
const edit = (id, originId) => {
  dialogId.value = id
  copyId.value = originId
  dialogTitle.value = id ? '编辑' : '新增'
  editDialogVisible.value = true
}
const editSuccess = () => {
  editDialogVisible.value = false
  getList()
}
const del = (id) => {
  ElMessageBox.confirm('确认删除选择的记录?', '删除')
    .then(() => {
      resource_routing_delete(id).then(res => {
        if (res.succeed) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          search()
        }
      })
    })
    .catch(() => {})
}
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_api_list)
onMounted(() => {
  getList()
})
</script>
<style scoped></style>
